<template>
  <Layout :showHome="true" :showD="true" title="任务大厅">
    <!-- 搜索部分 -->
    <div>
      <!-- <input class="serch" type="text" v-model="keyWord" placeholder="搜索"> -->
      <van-search shape="round" v-model="keyWord" placeholder="搜索" 
    @cancel="onCancel" />
    <div class="renw" v-show="search">
      <van-cell  class="li"  v-for="item in filPerson" :key="item.id" >
      
        <div class="top"  :title="item.id" >
          <span class="coding">{{ item.id }}</span>
          <span class="title" @click=detEvt(item.title,item.price,item.id)>{{ item.title }}

          </span>
          <van-tag plain type="primary" v-if="item.zhipai">指派</van-tag>
        </div>
        <div class="middle">
          <span class="money">￥{{ Number(item.price).toFixed(2)}}</span>
        </div>
        <div class="bottom">
          <span class="address">
            <van-icon name="location" color=#a8afea />
            {{ item.address }}
          </span>
          <span class="date">{{ item.time }}</span>
        </div>
      </van-cell>
      </div>
    </div>
    <!-- 任务部分-->
    <div v-show="showA" class="renw">
      <van-sticky>
        <van-notice-bar
          left-icon="volume-o"
          text="恭喜你！已经成功提￥1000000000，已经到账，请注意在钱包里面查看哦！！！"
        />
      </van-sticky>
      <div class="ad" @click="adEvt" v-if="delshow">
        <div class="del" @click="adlAdEvt" >x</div>
      <img src="@/images/hall/广告.png" alt="">
      </div>
      <van-pull-refresh id="ul" v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-cell class="li" v-for="item in list" :key="item.date">
            <div class="top" :title="item.id">
              <span class="coding">{{ item.id }}</span>
              <span
                class="title"
                @click="detEvt(item.title, item.price, item.id)"
                >{{ item.title }}
              </span>
              <van-tag plain type="primary" v-if="item.zhipai">指派</van-tag>
            </div>
            <div class="middle">
              <span class="money">￥{{ Number(item.price).toFixed(2)}}</span>
              <button @click="changeEvt(item.id)">接单</button>
            </div>
            <div class="bottom">
              <span class="address">
                <van-icon name="location" color="#a8afea" />
                {{ item.address }}
              </span>
              <span class="date">{{ item.time }}</span>
            </div>
          </van-cell>
        </van-list>
      </van-pull-refresh>
    </div>
    <span class="more">/(ㄒoㄒ)/~~ </span>
   
   

  </Layout>
</template>

<script>
import { editTaskApi, hallListApi } from "@/apis/hallApi";
import { StatusApi } from "@/apis/hallApi";
import { UserApi } from "@/apis/signApi";
export default {
  data() {
    return {
      userId: '',
      userInfo: {},
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      title: "",
      state: "",
      filPerson: [],
      keyWord: "",
      showA: true,
      // 实现模糊查询的定时器
      projectTimer: null,
      active: "",
      myid: "",
      id: "",
      query: { title: "", price: "", id: "" },
      status: "",
      search:false,
      delshow:true,
    };
  },
  watch: {
    // 实现输入查询--防抖
    keyWord(val) {
      clearTimeout(this.projectTimer);
      this.projectTimer = setTimeout(() => {
        this.filPerson = this.list.filter((p) => {
          return p.title.includes(val);
        });
         this.search = true
          this.showA = false
      }, 1500);
    },
  },
  created() {
    this.getUser();
  },
  methods: {
    // 广告页面
    adlAdEvt(){
      this.delshow=false
      setTimeout(()=>{
        this.delshow=true
      },3000)
    },
    adEvt(){
     this.$router.push('/ad')
    },
    onCancel() {
      this.search = false
      this.showA = true
    },
    // 获取用户信息
    async getUser() {
      this.userId = this.$store.getters["common/userId"];
      const result = await UserApi(this.userId);
      this.userInfo = result;
    },
    // 跳转到详情页面
    detEvt(title, price, id) {
      this.query.title = title;
      this.query.price = price;
      this.query.id = id;
      this.$router.push({ path: "/details", query: this.query });
    },
    // 接单以后active状态改变，status状态也会改变
    async changeEvt(id) {
      if (this.userInfo.active === 2 && this.userInfo.sign === 1) {
        StatusApi(id, 1).then((d) => {
          // let status =this.$store.getters['common/status']
          // console.log(status);
          // this.active =d.active
          // // this.status = d.status
          // if(this.active=='0'){
          //   this.active=2
          // }
          // console.log(this.status);
        });
        editTaskApi(id, { user: 1 })
        this.$dialog
          .confirm({
            title: "接单提醒",
            message: "你已经成功接单，可在列表中查看",
            cancelButtonText: "前往",
          })
          .then(() => {
            location.reload()
          })
          .catch(() => {
            this.$router.push("/list");
            // on cancel
          });
      } else {
        this.$toast.fail('清先完成注册流程')
      }
    },

    // async getList() {
    //   // 这个接口只会返回当前页的数据，为了数据传输量小
    //   let result = await hallListApi({})

    //   if (result.code === 200) {
    //       this.list = result.data.slice(0,this.a)
    //       // console.log(result.data);
    //       //  this.list = result.data.slice(0,3)
    //     // // 应该是第一页，直接赋值，从第二页开始需要合并数据
    //     //  this.list = this.page === 1 ? result.data.slice(0,3) : this.list.concat(result.data.slice(0,3))
    //     // // 计算是否有更多数据 -- total 总数 > 当前页page * 每一页的数量size 得到已经获取的数据
    //     // this.hasMore = this.page * 8 < result.data.total
    //   }
    //   // 因为数据赋值和页面渲染是异步
    //   let _this = this
    //   setTimeout(function () {
    //     _this.loading = false
    //   })
    // },

    //  下拉刷新
    onLoad() {
      if (this.refreshing) {
        this.list = [];
        this.refreshing = false;
      }
      hallListApi().then((res) => {
        // 如果status状态不是0，则不会出现在大厅中
        let a = [];
        let j = 0;
        for (let i in res) {
          if (res[i].status == 0) {
            a[j++] = res[i];
          }
        }
        for (let i = 0; i < 6; i++) {
          this.list.push(a[i]);
        }
      });

      this.loading = false;
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
  },
};
</script>

<style lang="less" scoped>
@import "@/style/common.less";
.del{
  position: relative;
  top: 43px;
  left: 15px;
}
.ad{
  width: 150px;
  height: 150px;
 position: fixed;
  bottom: 233px;
  left: 0;
  z-index: 9999999999;
  img{
    width: 100%;
    height: 100%;
  }
}
.more {
  display: block;
  width: 100%;
  height: 80px;
  text-align: center;
}
.renw .van-cell {
  margin: auto;
  margin-bottom: 15px;
  width: 300px;
  background: 247, 248, 250;
  padding: 10px;
  box-shadow: 2px 2px 3px 1px rgba(72, 69, 69, 0.1);
}
.top {
  display: flex;
}
.coding {
  // display: inline-block;
  margin-right: 10px;
}

.title {
  font-size: 0.8rem;
  font-weight: 600;
  // display: inline;
  width: 180px;
  // 多行超出隐藏
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden; //溢出内容隐藏
  text-overflow: ellipsis; //文本溢出部分用省略号表示
  display: -webkit-box; //特别显示模式
  -webkit-line-clamp: 1; //行数
  -webkit-box-orient: vertical; //盒子中内容竖直排列
}

.middle {
  padding: 10px 0px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.money {
  color: @a1;
  font-size: 1rem;
}

button {
  padding: 2px;
  border: none;
  width: 80px;
  background: @a1;
  color: #fff;
  font-size: 0.6rem;
  border-radius: 15px;
}

.bottom {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
  border-top: solid 1px #e3e4e6;
}
.address {
  font-size: 0.7rem;
  font-weight: 400;
  color: @c3;
}

.date {
  font-size: 0.7rem;
  font-weight: 400;
  color: @c4;
}
</style>
gi